<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas5</title>
	<style type="text/css">
		html,body{
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
	</style>
</head>
<body>
	<canvas id="myCanvas">
		Your browser does not support the HTML5 canvas tag.
	</canvas>

	<script>
		// window.onload = function () {
		// 	let WINDOW_WIDTH = document.body.clientWidth;//画布宽度
  //  	 		let WINDOW_HEIGHT = document.body.clientHeight;//画布高度
  //  	 		let text = "HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。不过，<canvas>元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。本手册提供完整的 getContext(2d) 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。浏览器支Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。";

		// 	var canvas = document.getElementById('myCanvas');
  //       	var ctx = canvas.getContext('2d');

  //       	canvas.width = WINDOW_WIDTH;
  //   		canvas.height = WINDOW_HEIGHT;

  //   		function multiRowText(ctx,cont,lineHeight,...vars){
		// 	    let lineWidth = 0;
		// 	    let canvasWidth = WINDOW_WIDTH;
		// 	    let lastSubStrIndex= 0;//上次截图字符的位置
  //   			let font = 'Bold 20px Arial';
  //   			let textAlign = 'center';
  //   			let style = 'fillStyle';
  //   			let color = '#000';
  //   			let x = 100;
  //   			let y = 100;
  //   			if(vars[0]) font = vars[0];
  //   			if(vars[1]) textAlign = vars[1];
  //   			if(vars[2]) style = vars[2];
  //   			if(vars[3]) color = vars[3];
  //   			if(vars[4]) x = vars[4];
  //   			if(vars[5]) y = vars[5];

  //   			if(ctx && cont && lineHeight){
  //   				ctx.beginPath();

  //   				ctx.font = font;
		// 			ctx.textAlign = textAlign;
		// 			if(style == "fillStyle"){
		// 				ctx.fillStyle = color;
		// 				//ctx.fillText(cont, x, y);
		// 				for(let i=0;i<cont.length;i++){
		// 			        lineWidth += ctx.measureText(cont[i]).width;
		// 			        if(lineWidth>canvasWidth - 2*x){
		// 			            ctx.fillText(cont.substring(lastSubStrIndex,i),x,y);
		// 			            y+=lineHeight;
		// 			            lineWidth=0;
		// 			            lastSubStrIndex=i;
		// 			        }
		// 			        if(i==cont.length-1){
		// 			            ctx.fillText(cont.substring(lastSubStrIndex,i+1),x,y);
		// 			        }
		// 			    }
		// 			}else{
		// 				ctx.strokeStyle = color;// 设置颜色
		// 				// ctx.strokeText(cont, x, y);// 绘制空心字
		// 				for(let i=0;i<cont.length;i++){
		// 			        lineWidth += ctx.measureText(cont[i]).width;//在画布上输出文本之前，检查字体的宽度
		// 			        if(lineWidth>canvasWidth - 2*x){
		// 			        	//宽度超出一行时
		// 			            ctx.strokeText(cont.substring(lastSubStrIndex,i),x,y);
		// 			            y+=lineHeight;
		// 			            lineWidth=0;
		// 			            lastSubStrIndex=i;
		// 			        }
		// 			        if(i==cont.length-1){
		// 			        	//最后一位时：
		// 			            ctx.strokeText(cont.substring(lastSubStrIndex,i+1),x,y);
		// 			        }
		// 			    }
		// 			}
  //   				ctx.closePath();
  //   			}
  //   		}

  //   		multiRowText(ctx,text,30,'Bold 20px Arial','left','fillStyle','#333',50,100);
  //   		multiRowText(ctx,'asdad',20,'Bold 20px Arial','center','strokeStyle','red',100,300);

  //   		//绘制椭圆
  //   		ctx.ellipse(400,400,300,200,0,0,Math.PI*2);//参数的意思：(起点x.起点y,半径x,半径y,旋转的角度，起始角，结果角，顺时针还是逆时针)
  //           ctx.fillStyle="#058";
  //           ctx.strokeStyle="#000";
  //           //ctx.fill();
  //           ctx.stroke();
		// }

		var myImage = document.createElement('img');
		myImage.src = "./image.jpg";
		myImage.onload = function() {
			var canvas = document.getElementById('myCanvas');
        	var ctx = canvas.getContext('2d');
        	canvas.width = myImage.naturalWidth;
        	canvas.height = myImage.naturalHeight;

			ctx.drawImage(myImage, 0, 0, myImage.naturalWidth, myImage.naturalHeight);
			var radialGradient = ctx.createRadialGradient (canvas.width/2, canvas.height/2, 10, canvas.width/2, canvas.height/2, 350);
			radialGradient.addColorStop(0, 'rgba(247, 247, 247, 0)');
			radialGradient.addColorStop(0.7, 'rgba(120, 120, 120, 0.5)');
			radialGradient.addColorStop(0.9, 'rgba(0, 0, 0, 0.8)');
			radialGradient.addColorStop(1, 'rgba(238, 238, 238, 1)');
			ctx.beginPath();
			ctx.arc(canvas.width/2, canvas.height/2, 300, 0, Math.PI * 2, true);
			ctx.closePath();
			ctx.fillStyle = radialGradient;
			ctx.fill();
		}
	</script>
</body>
</html>